<template>
  <div class="container">
    <div class="body">
      <div class="common-header">
        <div class="alibaba-design" />
        <div class="uncan-2019-text" />
        <div class="uncan-right" />
        <div class="title-status">
          {{orderStatus}}
        </div>
      </div>
      <div class="remain-time" v-if="ticketInfo.head.status === 0">
        <div class="remain-time-name">
          剩余时间
        </div>
        <flipDown v-if="countdown" :countdown="countdown" :onEnd="getOrderDetail" :id="id" />
      </div>
      <div class="title-description" v-if="ticketInfo.head.status !== 1">
        温馨提示: 超出限定时间未完成支付, 系统将自动关闭交易
      </div>
      <acquireTicket v-if="ticketInfo.head.status === 1" :out-sea="outSea" />
      <template v-if="ready && showDetail">
        <!-- 订单未支持的才允许修改用票人 -->
        <ticketCard v-for="ticket in ticketInfo.body_ticket" :ticket="ticket" :readonly="ticketInfo.head.status !== 0" :key="ticket.type_id" />
      </template>
      <totalPrice v-if="ready" :totalPrice="ticketInfo.head.money" :showDetail="showDetail" :toggleDetail="toggleDetail" :orderId="ticketInfo.head.billlcode" />
      <orderInfo v-if="ready && showDetail" :orderInfo="ticketInfo.head" />
      <payType />
    </div>

    <div class="bottom-buttons" v-if="ticketInfo.head.status === 0">
      <co-button class="close-action" color="disabled" @click="closeOrder">
        关闭订单
      </co-button>
      <co-button class="pay-action" color="primary" @click="pay" :loading="pending">
        确认支付
      </co-button>
    </div>
    <div class="bottom-buttons" v-else-if="[2,3,4].indexOf(ticketInfo.head.status) > -1">
      <co-button class="close-action" color="disabled" @click="quit">
        退出
      </co-button>
      <co-button class="pay-action" color="primary" @click="recreateOrder">
        重新下单
      </co-button>
    </div>
  </div>
</template>

<script>
import ticketCard from "./ticketCard";
import totalPrice from "./totalPrice";
import orderInfo from "./orderInfo";
import payType from "./payType";
import flipDown from "./flipDown";
import acquireTicket from "./acquireTicket";

import { ORDER_TITLE_TEXT } from "./constants";

import service from "../../api/order";

export default {
  name: "OrderDetail",
  components: {
    ticketCard,
    totalPrice,
    orderInfo,
    payType,
    flipDown,
    acquireTicket
  },
  data() {
    return {
      outSea: false,
      id: "",
      ticketInfo: {
        body_ticket: [],
        head: {}
      },
      ready: false,
      pending: false,
      // 是否显示完整的详情数据
      showDetail: false
    };
  },
  computed: {
    countdown() {
      if (this.ticketInfo.head.countdownPayment) {
        const now = new Date();
        const { createTime, countdownPayment } = this.ticketInfo.head;
        const secondsTillNow =
          (createTime + countdownPayment * 60 * 1000 - now.getTime()) / 1000;
        return secondsTillNow > 0 ? secondsTillNow : null;
      } else {
        return null;
      }
    },
    orderStatus() {
      if (this.ticketInfo.head.status !== undefined) {
        return ORDER_TITLE_TEXT[this.ticketInfo.head.status];
      } else {
        return "";
      }
    }
  },
  created: function() {
    this.id = this.$route.query.orderId;
    this.getOrderDetail(this.id);
  },
  methods: {
    getOrderDetail(id) {
      service
        .getOrderDetail({ orderId: +id })
        .then(res => {
          const {
            result: { body_ticket = [], head }
          } = res;
          this.ticketInfo = {
            body_ticket,
            head
          };
          this.outSea = !~["86", "886", "853", "852"].indexOf(head.countryCode);
          // 除未支付外, 所有订单默认展示详情
          this.showDetail = head.status !== 0;
          this.ready = true;
        })
        .catch(err => {
          console.log(err);
        });
    },
    toggleDetail() {
      this.showDetail = true;
    },
    pay() {
      // 支付
      this.pending = true;
      service
        .pay({
          out_trade_no: this.ticketInfo.head.billlcode,
          total_amount: this.ticketInfo.head.money,
          subject: this.ticketInfo.head.pname,
          body: this.ticketInfo.head.vnote,
          return_url: window.location.href
        })
        .then(res => {
          console.log(res);
          const { result = "" } = res;
          document.write(result);
        })
        .catch(err => {
          this.pending = false;
          console.log(err);
        });
    },
    closeOrder() {
      // 关闭订单
      service
        .close({
          billcode: this.ticketInfo.head.billlcode,
          status: this.ticketInfo.head.status
        })
        .then(res => {
          this.getOrderDetail(this.id);
        })
        .catch(err => {
          console.log(err);
        });
    },
    recreateOrder() {
      // 重新下单
      this.$router.replace({
        name: "buyTicketHome"
      });
    },
    quit() {
      // 退出
      this.$router.replace({
        name: "buyTicketHome"
      });
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .body {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30px;

    .common-header {
      width: 100%;
      height: 285px;
    }

    .remain-time {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: left;
      align-items: center;

      .remain-time-name {
        font-size: 22px;
        color: #c7c3c3;
        margin-right: 19px;
      }
    }
  }

  .bottom-buttons {
    height: 110px;
    position: relative;
    width: 100vw;
    max-width: 1480px;
    left: 0;
    bottom: 0;
    display: flex;

    .close-action {
      flex: 1 1 35%;
      border-radius: 0;
    }
    .pay-action {
      flex: 1 1 65%;
      border-radius: 0;
    }
  }
}
</style>
